webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
737 stars 63 forks source link

www.robotshop.com - site is not usable #15457

Closed webcompat-bot closed 5 years ago

webcompat-bot commented 6 years ago

URL: https://www.robotshop.com/en/

Browser / Version: Firefox Mobile 60.0 Operating System: Android 8.1.0 Tested Another Browser: Unknown

Problem type: Site is not usable Description: drop down menu, e.g. browse new arrivals, will not open Steps to Reproduce:

From webcompat.com with ❤️

softvision-oana-arbuzov commented 6 years ago

I was able to reproduce the issue. dropdownmenunotfunctional

Affected area:

<div class="homeLinksWrapper">
    <div class="homeProductLinks1Form container-fluid">
        <h2 class="text-center section-header">Find your product</h2>
        <div class="col-md-3">
            <div class="homeLinksBox">
                <select id="categories">
                    <option value="" style="color: #b4b4b4;" selected="selected">-&nbsp;Browse by category&nbsp;-</option>
                    <option value="robots.html">All</option>
                    <optgroup label="Robots to Build &amp; Experiment">
                        <option value="robots-to-build.html">Robots to Build &amp; Experiment</option>
                        <option value="robot-parts.html">Robot Parts</option>
                        <option value="robot-kits.html">Robots &amp; Kits</option>
                        <option value="drones.html">UAVs &amp; Drones</option>
                        <option value="robotics-education.html">Robotics Education</option>
                        <option value="robotic-tools-equipment.html">Tools &amp; Equipment</option>
                        <option value="books.html">Books</option>
                    </optgroup>
                    <optgroup label="Robots for the House &amp; Recreation">
                        <option value="robots-for-the-house.html">Robots for the House &amp; Recreation</option>
                        <option value="personal-domestic-robots.html">Personal &amp; Domestic Robots</option>
                        <option value="domestic-robot-accessories.html">Domestic Robot Accessories</option>
                        <option value="domestic-robot-replacement-parts.html">Domestic Robot Replacement Parts</option>
                        <option value="domestic-robot-extended-warranties.html">Domestic Robot Extended Warranties</option>
                        <option value="robots-personal-transportation.html">Robots for Personal Transportation</option>
                    </optgroup>
                    <optgroup label="Robot Toys">
                        <option value="robot-toys.html">Robot Toys</option>
                        <option value="entertainment-robot-toys.html">Entertainment Robot Toys</option>
                        <option value="remote-controlled-robot-toys.html">R/C Robot Toys</option>
                        <option value="robot-toy-gadget.html">Robot Gadgets</option>
                        <option value="robot-pets-toys.html">Robot Dogs &amp; Pets</option>
                    </optgroup>
                    <optgroup label="Professional &amp; Service Robots">
                        <option value="professional-service-robots.html">Professional &amp; Service Robots</option>
                        <option value="defense-security-surveillance.html">Defense, Security, Surveillance &amp; Inspection</option>
                        <option value="unmanned-aerial-vehicles-uav.html">Unmanned Aerial Vehicles (UAV)</option>
                        <option value="advanced-robotic-manipulators.html">Robot Manipulators</option>
                        <option value="entertainment-robots.html">Entertainment Robots</option>
                        <option value="guide-telepresence-robots.html">Guide &amp; Telepresence</option>
                        <option value="unmanned-underwater-vehicles-uuv.html">Unmanned Underwater Vehicles (UUV)</option>
                    </optgroup>
                    <optgroup label="Wearable Technology">
                        <option value="wearable-technology.html">Wearable Technology</option>
                        <option value="smart-watches.html">Smart Watches</option>
                        <option value="diy-wearables.html">DIY Wearables</option>
                        <option value="smart-clothing.html">Smart Clothing</option>
                        <option value="wearables-pets.html">Wearables for Pets</option>
                        <option value="fitness-health.html">Fitness &amp; Health</option>
                        <option value="gesture-control-entertainment.html">Gesture Control &amp; Entertainment</option>
                    </optgroup>
                    <optgroup label="RobotShop App Store">
                        <option value="robot-app-store.html">RobotShop App Store</option>
                    </optgroup>
                </select>
            </div>
        </div>
<!--not needed-->
        <div class="clearer"></div>
    </div>
</div>

EV Change:

function() {
  var baseUrl = 'https://www.robotshop.com/en/';
  var link = jQuery(this).val();
  if (link) {
    window.location = baseUrl + link;
  }
  return false;
}

Console:

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://accounts.google.com’) does not match the recipient window’s origin (‘https://www.robotshop.com’).
en
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified

Tested with: Browser / Version: Firefox Nightly Mobile 60.0a1 (2018-02-14) Operating System: Google Pixel (Android 8.1.0) - Resolution 1080 x 1920 pixels (~441 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

karlcow commented 6 years ago

Thanks @softvision-oana-arbuzov The postMessage error message happens on Chrome too.

None of the dropdowns are working on Firefox. Reproducible on responsive design mode.

in https://www.robotshop.com/en/

    jQuery(document).ready(function() {
        jQuery('.homeLinksWrapper select option[selected="selected"]').each(
        function() {
            jQuery(this).removeAttr('selected');
        }
    );
    // mark the first option as selected
    jQuery(".homeLinksWrapper select option:first").attr('selected','selected');

    jQuery('.homeLinksWrapper select').bind('change', function () {
      var baseUrl = 'https://www.robotshop.com/en/';
      var link = jQuery(this).val();
      if (link) {
        window.location = baseUrl + link;
      }
      return false;
    });
  });

It's working if we remove touch events.

Ah maybe I found it… https://www.robotshop.com/en/

<script type="text/javascript">
  window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);
</script>

Read https://miketaylr.com/posts/2017/10/fast-click-more-like-thing-of-the-past-click.html

They should just remove it. This is useless.

adamopenweb commented 6 years ago

Seems they want issues to be reported on their forum.

Technical queries should be directed to the RobotShop Forum

https://www.robotshop.com/forum/

adamopenweb commented 6 years ago

Actually the support form has a spot for webmaster: https://www.robotshop.com/en/support.html/

Contacted via the form.

rbrlortie commented 6 years ago

Hello everyone,

What an awesome community, we ❤️ it!

You are right, the culprit is without a doubt FastClick. It will be removed by next release.

We don't have a bug report bounty program but we will gladly give each of you a coupon code as thanks.

If you are interested you can send us a message via the contact form (department: Webmaster, subject: Webcompat) or join us on http://slack.robotshop.com/ to send me a DM.

Thanks again, rlortie @ RobotShop

adamopenweb commented 6 years ago

Thanks @rbrlortie! That's really nice, thank you. 😄

cipriansv commented 5 years ago

After retesting the issue I confirm that the issue has been fixed. The drop-down is displayed.

image

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-08-06), Firefox Preview 1.1.0 (Build #12042112) Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)