Bug 151941 – Wide tables should be scrollable on narrow mobile screens

• Status: RESOLVED
• Resolution: FIXED
• Component: WebKit Website

[Jon Davis]

Currently tables with content that cannot be wrapped (Wide images) are not scrollable on narrow mobile screens. It makes it impossible to see all of the content.

[Jon Davis]

Created attachment 266815 [details]
Patch

[Timothy Hatcher]

Comment on attachment 266815 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=266815&action=review

> Websites/webkit.org/wp-content/themes/webkit/scripts/global.js:100
> +            var table = tables[i].outerHTML;
> +            var wrappedTable = "<div class=\"scrollable\"><div class=\"scrollable-padding\">" + table + "</div></div>";
> +            tables[i].outerHTML = wrappedTable;

Should do this without using outerHTML. You can make the divs with DOM operations and move the table element inside it, etc. That will avoid involving the parser, and security issues that innerHTML/outerHTML invites.

[Jon Davis]

Created attachment 266906 [details]
Patch

[Timothy Hatcher]

Comment on attachment 266906 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=266906&action=review

> Websites/webkit.org/wp-content/themes/webkit/scripts/global.js:105
> +            paddingDiv.classList.add('scrollable-padding');

This could be done earlier, next to the scrollableDiv.classList.add.

[Jon Davis]

Created attachment 266954 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 266954 [details]
Patch

Clearing flags on attachment: 266954

Committed r193808: <http://trac.webkit.org/changeset/193808>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.