Dylan Chun Wong [:dwong] Reporter
	Description • 10 years ago

User Agent: Mozilla/5.0 (Android; Mobile; rv:33.0a1) Gecko/33.0a1 Firefox/33.0a1
Hardware: LG Nexus 5
Software: KitKat 4.4.4

Steps to Reproduce
1. navigate to http://aprilzero.com
Expected Result:
 A a clock with spinning gears tells the time only through CSS transforms
Actual Result:
 Only the background loads, but no other elements.

	Kevin Brosnan [Ex-Mozilla]
	Comment 1 • 10 years ago

If I rotate my Nexus 5 the content is displayed. Though with some ugly black borders. Mike do you have some time to look at this and see if it is a Gecko issue or a website issue?

	Mike Taylor [:miketaylr]
	Comment 2 • 10 years ago

I see "TypeError: seconds_hand[0].after is not a function" in the console (and the same rotation thingy as kbrosnan). Will dig in.

	Mike Taylor [:miketaylr]
	Comment 3 • 10 years ago

I see the URL has been changed... the new site is only contains -webkit- prefixes, so the layout is also messed up. :/

As for the "old" site, we're doing what the CSS is asking us to do:

In landscape mode, the body width and background size are constrained to 480px, which I guess is convenient for owners of a certain phone. 

/* iPhone landscape */
@media only screen and (min-width : 480px) and (max-device-width : 960px) and (orientation:landscape) {
    
    /* warning - this leaks over to ipad */
    /* and narrow desktops! */

    body {
        background: url(../i/red_iphone.jpg) no-repeat center center;
        background-size: 480px auto;

        width: 480px;

        min-height: 270px;
        height: 100%;
        }

    section.clock .patch {
        background-image: url(../i/shell/patch_iphone.png);
        background-size: 261px 261px;
        }

}

In portrait mode, the clock is hidden by positioning. 

Given the following in all.js, it's pretty clear the author is serving up a better experience to mobile webkit browsers by design.

if ($.browser.webkit) {
        $("body").removeClass("static");
        $(window).load(function() {
            pageLoadedFull();
        });
    } else {
        $(window).load(function() {
            pageLoadedLite();
        });
    }

There's also some WebKit only window.orientation stuff, 
window.onorientationchange = function() {
  rejuvenate();
  switch (window.orientation) {

However, since this seems like a demo site that's been moved to an "old" URL, I don't know how much effort we want to put in getting them to fix this. But we could reach about the layout/CSS issues for the new site and mention these issues as well. Going to move to TE and let Karl decide what to do.

	Mike Taylor [:miketaylr]
	Comment 4 • 10 years ago

As for the current site, it's only really concerned with Webkit prefixes, both in its main CSS file and from JS, e.g., 

day.prev().addClass('move-up') .css({
  '-webkit-transform': 'translateY(' + this.activeDayMoved * 0.9 + 'px) translateZ(0)'
});

It's a responsive site, with mobile or desktop class being set by screen width:

AprilzeroLoading.prototype.getSizeClasses = function () {
            var classes,
            width;
            width = $(window) .width();
            if (width < this.mobileWidthThreshold) {
                classes = 'mobile';
                this.isMobile = true;
            } else {
                classes = 'desktop';
                this.isMobile = false;
            }
            return classes += ' ' + this.getTimeOrientationClasses(width);
        };

(it just happens to be poorly designed on my HTC one--probably looks great on an iPhone). 

Recommended fix would be to toss in non-prefixed variants for all WebKit CSS and see how far that gets you.

	Karl Dubost💡 :karlcow
	Comment 5 • 10 years ago

To note that this is a personal site which got recently a bit of exposure because of the new site and its design. It pleased a lot of people using iOS devices, maybe less so other people.

Dylan,
you could try to contact the site owner who is living in the Silicon Valley, on what are his plans for the old site and the new site and suggest what mike said in the comments above.

Thanks.

	Dylan Chun Wong [:dwong] Reporter
	Comment 6 • 10 years ago

Sure, no problem!

	Dylan Chun Wong [:dwong] Reporter
	Comment 7 • 9 years ago

Hi, this was from long ago, but I'm just going to close it now. The developer never responded, but he did release a library platform based on the site which now works on the latest version of Firefox. Will mark as resolved but not sure whether to put wontfix or what have you.

	Mike Taylor [:miketaylr]
	Comment 8 • 9 years ago

That's fine. Likely these types of problems will be obsolete when we ship -webkit- aliasing of CSS properties anyways.