FLUID-4966: In Webkit, the horizontal scroll bar is larger than necessary and scrolling left clips content

Description

In Webkit browsers, the horizontal scrollbar is wider than necessary, and scrolling from right to left causes the contents in the UIO panel to be clipped.

To reproduce:
1. Remove the following script blocks from components/uiOptions/html/FatPanelUIOptionsFrame.html
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var uaClass = "webkit";
if (ua.indexOf("safari") >= 0 || ua.indexOf("chrome") >= 0) {
jQuery("document").ready(function () {
jQuery("body").addClass(uaClass);
});
}
</script>

<style type="text/css">
.webkit.fl-uiOptions-fatPanel {
width: 225em;
}
</style>

2. Load either Climate Change or stand-alone demo.
3. Open the UIO panel.
4. Scroll all the way to the right.
5. Notice that there is a lot of extra horizontal space to the right of the UIO panel.
6. Scroll back to the left.
7. Notice that the UIO panel begins to clip until reaching the left end of the horizontal scroll.

Environments

Safari, Chrome

Comments

• Jonathan Hung commented 2013-04-01T15:40:06.550-0400

  For the demo, this hack is fine.

• Jonathan Hung commented 2013-04-02T13:32:45.572-0400

  Doing some more digging, it appears the fl-hidden-accessible class applied to the input element in UIOptionsTemplate-layout.html is causing this problem.

  In fss-layout.css in the framework, deleting the property 'position:absolute' in .fl-hidden-accessible reveals it to be the culprit.

  Without deleting position:absolute (which is needed for properly hiding elements) adding top: 0; and left: 0; properties appears to fix this problem.

  To implement this fix:

  1. Remove the following script block from /uiOptions/html/FatPanelUIOptionsFrame.html (this was the Webkit specific hack to skirt around this issue):

  <script type="text/javascript">
  var ua = navigator.userAgent.toLowerCase();
  var uaClass = "webkit";
  if (ua.indexOf("safari") >= 0 || ua.indexOf("chrome") >= 0) {
  jQuery("document").ready(function () {
  jQuery("body").addClass(uaClass);
  });
  }
  </script>

  <style type="text/css">
  .webkit.fl-uiOptions-fatPanel {
  width: 225em;
  }
  </style>

  2. Load either the UIO demo, or the climate change demo.
  3. Scroll all the way to the right and then slowly scroll back left.
  4. Notice excess horizontal space and clipping.
  5. Edit /framework/fss/css/fss-layout.css and add: "top:0; left:0;" to .fl-hidden-accessible
  6. Refresh the demo.
  7. Repeat step 3: Scroll all the way to the right and then slowly scroll back left.
  8. Notice that the excess space and horizontal clipping is now gone.

• heidi valles commented 2013-04-11T13:05:07.090-0400

  Check out line 170ish of FatPanelUIOptions.js - some hard-coded styles in there for iframe scrolling. Maybe related?

  style: "overflow-x:hidden; overflow-y:auto;",