Opened 7 years ago

Closed 7 years ago

#9662 closed bug (notabug)

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>

Change History (6)

comment:1 Changed 7 years ago by ezzxki

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.

comment:2 Changed 7 years ago by Jörn Zaefferer

Owner: set to ezzxki
Status: newpending

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

Is there any reason against that?

comment:3 in reply to:  2 Changed 7 years ago by ezzxki

Status: pendingnew

Replying to 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.

comment:4 Changed 7 years ago by Scott González

Status: newpending

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.

comment:5 in reply to:  4 Changed 7 years ago by ezzxki

Status: pendingnew

Replying to 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.

comment:6 Changed 7 years ago by Scott González

Resolution: notabug
Status: newclosed

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.

Note: See TracTickets for help on using tickets.