Closed Bug 1037222 Opened 8 years ago Closed 7 years ago

CSS/HTML does not display properly on http://aprilzero.com

Categories

(Web Compatibility :: Mobile, defect)

ARM
Android
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED WONTFIX

People

(Reporter: dwong, Unassigned)

References

()

Details

(Whiteboard: [webkitcss][contactready][country-us])

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.
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?
Flags: needinfo?(miket)
I see "TypeError: seconds_hand[0].after is not a function" in the console (and the same rotation thingy as kbrosnan). Will dig in.
Assignee: nobody → miket
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.
Component: General → Mobile
Product: Firefox for Android → Tech Evangelism
Assignee: miket → nobody
Depends on: 920734
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.
Whiteboard: [webkitcss][contactready][country-us]
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.
Flags: needinfo?(dwong)
Sure, no problem!
Flags: needinfo?(dwong)
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.
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → WONTFIX
That's fine. Likely these types of problems will be obsolete when we ship -webkit- aliasing of CSS properties anyways.
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.