Closed
Bug 1037222
Opened 10 years ago
Closed 9 years ago
CSS/HTML does not display properly on http://aprilzero.com
Categories
(Web Compatibility :: Site Reports, defect)
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.
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?
Flags: needinfo?(miket)
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.
Assignee: nobody → miket
Reporter | ||
Updated•10 years ago
|
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.
Component: General → Mobile
Product: Firefox for Android → Tech Evangelism
Updated•10 years ago
|
Assignee: miket → nobody
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.
Whiteboard: [webkitcss][contactready][country-us]
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.
Flags: needinfo?(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.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → WONTFIX
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.
Assignee | ||
Updated•5 years ago
|
Product: Tech Evangelism → Web Compatibility
Assignee | ||
Updated•4 months ago
|
Component: Mobile → Site Reports
You need to log in
before you can comment on or make changes to this bug.
Description
•