Skip to main content

Search and Top Navigation

#9964 open bug ()

Opened April 03, 2014 12:48PM UTC

Last modified April 04, 2014 01:23PM UTC

Resizable: Border/Outline not shown after browser zoom

Reported by: Mathias Owned by:
Priority: minor Milestone: none
Component: ui.resizable Version: 1.10.4
Keywords: Cc:
Blocked by: Blocking:
Description

If the standard browser zoom was changed to a bigger size the border or outline disappears. Only the right and bottom border is effected. Test it with a full page refresh (ctr + f5). Effected browsers(FF 28, Chrome 33.0.1750.154, ...).

The problem with the outline can be tested on ui resizable site itself:

http://jqueryui.com/resizable/#textarea

I created a fiddle for my main problem with the borders:

http://jsfiddle.net/4L7uh/3/

Chrome 33: 100% Zoom

Textarea outer width: 205

Resize container outer width: 205

Chrome 33: 110% Zoom

Textarea outer width: 206

Resize container outer width: 205

Because the outer width of the textarea is 1px bigger than of its container the right border will not be displayed.

The same problem is with the height.

Other jQuery and ui versions have the same issue.

Attachments (0)
Change History (1)

Changed April 04, 2014 01:23PM UTC by tj.vantoll comment:1

status: newopen
summary: Border/Outline not shown after BrowserzoomResizable: Border/Outline not shown after browser zoom
version: 1.7.31.10.4

Here's a simplified test case using the latest version of jQuery UI: http://jsfiddle.net/tj_vantoll/raHYn/.

What's going on here is the wrapper's width is determined early on in

_create()
(https://github.com/jquery/jquery-ui/blob/baf6bc5c27003468052d81589855b6587f004d94/ui/resizable.js#L107), based on the textarea's size, but then the textarea's dimensions are changed (https://github.com/jquery/jquery-ui/blob/baf6bc5c27003468052d81589855b6587f004d94/ui/resizable.js#L577), and the wrappers dimensions are no longer accurate.

This crude extension fixes the dimensions: http://jsfiddle.net/tj_vantoll/raHYn/3/ — but the borders are still screwed up.

I know jQuery Core doesn't support getting certain dimensions when the browser is zoomed, and that might be the core issue here, but I'd like to verify that before closing that (if that is what's going on).