973463 - m.fisher-price.com has messy layout in Firefox for Android and Firefox OS

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Hallvord R. M. Steen [:hallvors]]

Attachment: 2014-02-17_13-05-24.png

Loading m.fisher-price.com shows these issues:

* There's a floating banner overlay inviting us to take part in a questionnaire or something - this can't be closed in Firefox. Touching the "x" icon does nothing. (It works fine in Android stock browser)

* On reload the banner is gone (and it may be a temporary thing anyway) but some of the buttons (4 years, 5+ years) are rendered very large on top of other content.

See attached screenshots.

Comment 1

[Hallvord R. M. Steen [:hallvors]]

Attachment: 2014-02-17_13-24-23.png

Comment 2

[Hallvord R. M. Steen [:hallvors]]

For problem #1, we need to hit this code:

        //Pop up Close icon click event
        $('#popup-close, .popup-close-button, .thomas-popup-close').live('click', function(event) {
            //Stop default anchor event
            event.preventDefault();
            //For Demos/Tv Ads stop the video to fix the FireFox bug of audio continuing to play in background
            var myVideoPlayer = document.getElementById("flaMovie");
            if (myVideoPlayer != null) {
            //myVideoPlayer.sendEvent("STOP");
            //myVideoPlayer.sendEvent("PLAY", "false");
            //alert('Close clicked!');
            }
            //Call the function to hide the popup 
            $.closeOverlay();
            
            $('.displayComponentOverlay, .displayHomeVideoOverlay').html('');
        });

Any known problems with jQuery.live stuff?

Comment 3

[Hallvord R. M. Steen [:hallvors]]

Automated analysis lists some style issues, but I'm not sure if I can see a smoking gun here:

"-webkit-transform used without equivalents for body.fb_hidden in http://m.fisher-price.com#inline_style1:39:16, value: none",
"-webkit-box-shadow used without equivalents for .fb_dialog_content .dialog_header in http://m.fisher-price.om#inline_style1:46:35, value: white 0 1px 1px -1px inset",
"background used without equivalents for .fb_dialog_content .dialog_header in http://m.fisher-price.com#inline_style1:46:81, value: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#738ABA), to(#2C4987))",
"-webkit-font-smoothing used without equivalents for .fb_dialog_content .dialog_header table in http://m.fisher-price.com#inline_style1:47:41, value: subpixel-antialiased",
"background used without equivalents for .fb_dialog_content .touchable_button in http://m.fisher-price.com#inline_style1:53:38, value: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4966A6),\ncolor-stop(0.5, #355492), to(#2A4887))",
"-webkit-background-clip used without equivalents for .fb_dialog_content .touchable_button in http://m.fisher-price.com#inline_style1:54:65, value: padding-box",
"-webkit-border-radius used without equivalents for .fb_dialog_content .touchable_button in http://m.fisher-price.com#inline_style1:54:101, value: 3px",
"-webkit-box-shadow used without equivalents for .fb_dialog_content .touchable_button in http://m.fisher-price.com#inline_style1:54:127, value:rgba(0, 0, 0, .117188) 0 1px 1px inset,\nrgba(255, 255, 255, .167969) 0 1px 0"

Comment 4

[Mike Taylor [:miketaylr]]

I'm not aware of any major $.fn.live issues for jQuery, but it is "deprecated" since 1.7. See some of the drawbacks listed at https://api.jquery.com/live/ ("As of jQuery 1.7..."). jQuery recommends using the `on` API for event delegation now. (no guarantees that actually fixes the issue, though)

Comment 5

[Hallvord R. M. Steen [:hallvors]]

This script reorganises the DOM, including moving the buttons that end up overlaying the page to the place they should be:
http://www.fisher-price.com/resources/scripts/jquery.flexslider-min.js
Unfortunately, in Firefox it throws an error before it's done. Commenting out this line will fix it:
o && r.vars.touch && v.touch();

The touch() method handles both standards-compliant touch events and Microsofty touch events. They have a sensible feature detection approach:

s = window.navigator && window.navigator.msPointerEnabled && window.MSGesture

However, the problem happens when they put a function declaration inside an if(){} block - and reference it *before* it's declared. Because Gecko permits conditional function declarations, it seems the declaration is not hoisted and referencing it above the function declaration (although inside the if block) throws. So this code:

if (!s) {
	t.addEventListener("touchstart", g, !1);
	function g(s) {

is broken before the addEventListener() call apparently needs to be *after* the function.

I knew Gecko allows conditional function declaration, but I wasn't actually aware of this gotcha. All the problems on the site are caused by this exception.

Comment 6

[Hallvord R. M. Steen [:hallvors]]

Browsers that don't have special magic to handle function declarations inside if() blocks will work fine on this site.

Do we have any plans to drop this feature? We will certainly get in touch with the site and recommend the minor change that will fix things, but why maintain a non-standard extension that causes us trouble?

Comment 7

[Mike Taylor [:miketaylr]]

Ah, jQuery.flexslider--we ran into this exact issue in Bug 936433, but the site was nice enough to manually patch this. I sent a pull request to the project (https://github.com/woothemes/FlexSlider/pull/986), but with 558 open issues and 49 open pull requests it seems like WooThemes has mostly abandoned the plugin.

Comment 8

[Brendan Eich [:brendan]]

The ES6 new-new compromise for backward compatibility is recorded here:

http://esdiscuss.org/notes/2014-01-29

"""
Conclusion/resolution

* Two bindings.
* Hoist a var binding for the FunctionDeclaration, unless it would introduce a static error (ie. hoisting past a let will not cause an error but also not create the var binding).
* Also create a let binding as per pure (strict mode) ES6 semantics. (Change from IE11 semantics). Within the scope of the let binding, assignment will only touch the let binding (ie. normal semantics).
* The var binding is only initialized at dynamic evaluation of function declaration.
* A SHOULD warning if there is a reference to any such var binding of a function
"""

This should make this site work (cc'ing Allen to double-check). We just need SpiderMonkey to implement. Is there a bug on file yet? Cc'ing Jason.

/be

Comment 9

[Allen Wirfs-Brock]

(In reply to Brendan Eich [:brendan] from comment #8)
> The ES6 new-new compromise for backward compatibility is recorded here:
> 
> http://esdiscuss.org/notes/2014-01-29
> 
> """
> Conclusion/resolution
> ...
> 
But note that the var binding hack doesn't appear to be necessary to fix this particular issue. ES6 specifies that function declarations in a block are hoisted to and initialized at the top of the block. That looks like it is enough be enough to fix this site.

Allen

Comment 10

[Hallvord R. M. Steen [:hallvors]]

Allen, do you know if there is a bug on fixing that? We can use this bug for Tech Evang (it should be easy for the site to fix it if we reach the right person) but I want to make sure we follow up on the core side as well - probably more sites using jquery.flexslider out there..

Comment 11

[Allen Wirfs-Brock]

Bug 950547 is the work item to bring SpiderMonkey declaration semantics into conformance with ES6.

That would correct his problem. But, as mentioned in comment #8, simply moving the function at the top of the block should make the app work right now before any changes land for SpiderMonkey and shouldn't cause any problems for other browser where thinks now work.

Comment 12

[Hallvord R. M. Steen [:hallvors]]

This problem can be fixed by editing this file:
http://www.fisher-price.com/resources/scripts/jquery.flexslider-min.js

and move this statement:

t.addEventListener("touchstart",g,!1);

to just before this text:

function y(t){

Comment 13

[Karl Dubost💡 :karlcow]

this is fixed.