#9662 closed bug (notabug)

Opened November 17, 2013 05:11AM UTC

Closed November 18, 2013 01:46PM UTC

The .position() method will cause flickering in Chrome.

Reported by: ezzxki Owned by: ezzxki
Priority: minor Milestone: none
Component: ui.position Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:
Description

Below is an example that can be used to recreate the buggy behavior. When you scroll the window, you can see the logo flicking. Firefox has no such problem, by the way.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<script type="application/javascript" src="jquery-2.0.3.min.js"></script>
<script type="application/javascript" src="jquery-ui-1.10.3/jquery.ui.position.js"></script>
<script type="application/javascript">
<!--
$(function() {
	$(window).on('scroll', function(evt) {
		$('img').position({
			my: 'right center',
			at: 'right-20 center',
			of: window,
			collision: 'none',
		});
	});
});
//-->
</script>
</head>
<body style="background:#000; height:3000px">

<img src="http://jqueryuivskendoui.com/img/jquery-ui-logo.png" />

</body>
</html>
Attachments (0)
Change History (6)

Changed November 17, 2013 05:23AM UTC by ezzxki comment:1

here is an example that can be used to recreate the buggy behavior. When you scroll the window, you can see the logo flicking. Firefox has no such problem, by the way.

Changed November 17, 2013 12:04PM UTC by jzaefferer comment:2

owner: → ezzxki
status: new → pending

You should use CSS with position:fixed: http://jsfiddle.net/HrfSL/

Is there any reason against that?

Changed November 18, 2013 01:17PM UTC by ezzxki comment:3

status: pending → new

Replying to [comment:2 joern.zaefferer]:

You should use CSS with position:fixed: http://jsfiddle.net/HrfSL/ Is there any reason against that?

The "using" option of .position() can be used to make the final decision whether to change the position of the wrapped elt, depending on some criteria, which seems not likely possible for pure CSS to achieve the same result.

I was trying to put a shorter version of my original codes on jsFiddle, but unfortunately it didn't work as expected, probably because the frame things. I don't know. Sorry. Having spent too much time on this, hopefully the description above is enough to explain the idea.

Changed November 18, 2013 01:22PM UTC by scottgonzalez comment:4

status: new → pending

The question is not why are you using .position(), but rather why are you positioning during scroll? You should be using fixed positioning and set the position once, not during a scroll.

Changed November 18, 2013 01:44PM UTC by ezzxki comment:5

status: pending → new

Replying to [comment:4 scott.gonzalez]:

The question is not why are you using .position(), but rather why are you positioning during scroll? You should be using fixed positioning and set the position once, not during a scroll.

http://webpop.github.io/jquery.pin/

Any suggestion not to position during scroll to have a similar effect? It seems inevitable to me to use scroll's handler, whether using .position() or CSS fixed.

Changed November 18, 2013 01:46PM UTC by scottgonzalez comment:6

resolution: → notabug
status: new → closed

I actually wouldn't use .position() for that, but if I was going to, I'd only set the position when it first needs to become fixed. If you need more help on the implementation, please use the forums or Stack Overflow.