I have a page where necessary elements are repositioned over some extra html attributes.
For example:
<div class="contentplate" relativePosition="top-left" relx="1" rely="3" relw="14" relh="8" relFontSize="80"></div>
is repositioned by class 'contentplate'. It is positioned to a raster related on the actual windowsize. It's child elements are processed recursively to get the relative positioning also working inside this containers. All of this works as expected.
The trouble begins when using jQuery('parentcontainer').animate( {left:0},100 ) or something:
in some way repositioning the elements leads, jquery to animate only the parent element and not the childs.
the funny part is after te animation is done, the position of the childs is corrected somehow by jQuery but as told not animated.
All the elements are styled position:absolute, overflow:hidden
and no, the repsotion algorithm only runs if the window is resized, or after the page has been loaded once.
I have 3 Test for you if you are interested:
the site fully dynamically repositioning (animation is failing, except in firefox)
http://www.bourier.org/demos/jquery_animation_failure/test_2.html
a snapshot of a repositioned site without active repositioning (all browsers, all good)
http://www.bourier.org/demos/jquery_animation_failure/test.html
a fully dynamically repostioning site with a yellow grid you can see enabled
http://www.bourier.org/demos/jquery_animation_failure/test_3.html
a screenshot where you can see the dynamic page with grid enabled
thanks for your time
As it seems, it is a bug in the browser Engine correlated to usage of a canvas and CSS modifications of div's z-ordered above.
The canvas is there only for checking the grid features are correct e.g. debugging purposes.
I removed the canvas and everything is working now as expected.
There is something very wrong, can be shown here using the chrome developer tools:
The elements are detected in the correct position by the debugger, and mousepointer, but they are not displayed there. very odd this.
i don't want to digg deeper than this, but in my opinion the Firefox behaviour is correct and Chrome and Safari are doing something very wrong.
If i should post a issue report to chrome developers leave a comment and i will.
Related
Is this a Firefox bug, or am I doing something wrong?
Changing the top value of a positioned element many times (for instance while a user drags an other element) works on all mainstream browsers as far as I could test, but Firefox which seems to debounce these changes.
Here's a working example under Chrome:
And a failing one under Firefox (notice that the attribute is updated in the dev tool, but the page stays out of sync until the events stop being fired):
You can try it at http://ec2-13-58-57-41.us-east-2.compute.amazonaws.com:8080/components
Quick note:
You might tell me to just use the browser's scroll so here's my reason for doing what I described:
I find it practical to have a Scroller React Component wrapping content:
it makes it easy to control the style of all of my scrollbars for any browser, depending on a theme and on the state of the application (like displaying them only when the content is hovered for instance)
it provides a single development interface for regular scrolling and virtual scrolling
I am developing, just for fun, a jQuery plugin that reveals elements from a "stack" as you scroll down the page.
Github repo is here - https://github.com/JayBizzle/Reveal
Demo is here - http://jaybizzle.github.io/Reveal/
Everything works great in Chrome, but when testing in Safari I am seeing some weird rendering issues.
If you view the demo in Safari and scroll down fairly quickly, you will notice white gaps appearing between the coloured DIVs.
Even stranger is, if you then inspect one of the out of position DIVs, the inspector highlights the DIV in the correct position. Also, if whilst your in the inspector, you change one of the elements CSS attributes, like adding a border, the page gets redrawn and the element appears in the correct position.
Anyone got any ideas if this is a Safari bug, or something i can overcome with some little known CSS?
I had a similar issue.
My workaround was giving position static first and then relative with a bit of delay.
$(elem).css('position', 'static');
setTimeout(function() {
$(elem).css('position', 'relative');
}, 1);
In the project I currently work on we experience very strange rendering issue. The worst thing is that this issue emerges completely spontaneously and after several days of testing we haven't managed to find the sequence of actions wich would reproduce this issue. Here is an explanation of how this bug look like. Here is a screenshot of how the page should look like:
But instead of this after some manipulations content block pops up so only the part of the content is visible and its look like:
The most strange thing is that such a position of the block is not based on values of CSS properties as shown by Web Inspector.
As you can see the CSS properties are ok, while the position of the block is not. This fact suggest me that it could be some rendering bug of the WebKit engine
The project is built using Ext JS 3.4 and it is a classical one-page web application. This issue was seen in the last versions of Chrome and Safari on Mac OS 10.7/10.8. Though due to the spontaneous nature of this issue it might be present in other browsers and platforms too.
Any piece of advice on how to debug such issues or how it could arise is welcome.
Please check if any of your code or Ext JS's code is using scrollIntoView method, we have seen similar issue when scrollIntoView is called on any element that does not have overflow set to auto and it is inside an clipped element that is probably placed relatively positioned.
It seems bug in webkit because it scrolls clipped element which is not happening in other browsers.
I also see two elements in same hierarchy which has overflow set to auto. And scrollIntoView is scrolling wrong element.
Chrome and safari on Mac are having problems with scrolling. If the element has been scrolled and the content changes, the scroll position is kept even if the content is not high enough to require a scrolling.
The work around we have found in our application is to resize the container (the one that has the scroll) so that it has the scrollbar (or else you cannot play with the scrolling properties) and then reset the scrolling, and the height.
$(container).css('height',1).scrollTop('1').css('height','');
Here is how we do it in jQuery. You will not even see a flickering :)
I am not sure if it is the problem, but this thing kept us on our feet for a while.
i went through the same problem while working with a sencha touch 2 app and because thats same as ExtJS i have a solution for you
this probably is a bug in the framework and this happens when the ExtJS renders the application before the browser populates mayb the correct window.innerWidth and window.innerHeight and thus the viewport cannot take the correct width and height. this also explains the randomness of the event. This becomes more prominent when used on mobiles probably because of the limited resources and slow response.
the solution that i took to handle this mayb isnt a good one but i couldnt find a better one considering is a glitch in the framework itself
i poll for the correct height and width of the browser for around a sec after every say 100ms for the correct height and width of the window and if i find that the height OR width of the viewport isnt same i re adjust it. because you are working with ExtJS and app would run on high powered systems(as compared to mobile phones) i would recommend a smaller interval and then to be safe a larger time period to which it polls.
heres the code that i use currently edit according to your needs
var aId = setInterval(function () {
if (Ext.Viewport.getWidth() !== window.innerWidth || Ext.Viewport.getHeight() !== window.innerHeight) {
Ext.Viewport.setSize(window.innerWidth, window.innerHeight);
clearInterval(aId);
}
num = num + 1;
if (num > 10) {
clearInterval(aId);
}
}, 100)
i currently use this code inside the launch function of the app. but you can also use this inside the show event of the viewport for which you should keep the interval time to minimum possible to avoid any lags.
with this if you think this app might be used on devices where the window height and width would be changed by the user (like that of mobile browser when the orientation changes or if you think user would change the height and width of the browser window). then just copy & paste the same code piece inside the viewports resize event so that it also polls and resizes viewport when the size of the viewport changes.
Did you try adding a clear:both; block after the toolbar div ?
<div style="clear:both;"></div>
#bjornd it's pretty hard to debug without any code :)
Is the toolbar positioned and has the content an ID that's called in the URL?
In other words: is there some link (e.g.) that triggers #content and has no preventDefault() etc? This would scroll the page probably.
I dunno, this was the first thing that came to mind.
It could also be the toolbar content that is (for some reason) no longer cleared or some change in the content's top position (relative to another changed/removed element?)
Try and create a stripped-down test-case that contains the simplest of code but still triggers the bug. If you post that (through e.g. a Fiddle etc) we can have a proper look.
It might be a css issue;
I've had a similar issue using equal height divs by setting a padding-bottom: 99999px; and margin-bottom: -99999px;. Which workes fine in all cases, except when you use hashtag anchors to jump to a div further on the page. Jump down.
In that case the top of the page clipped and started with the div I wanted to see.
Since you say the problem is pretty hard to track, this might be something to have a look at. The solution was to remove these 2 css lines and use another method of setting div heights.
Please note: With my site host company, jQuery (very unfortunately) is NOT an option for me and I cannot link to external JS or CSS files. My popup div contains the CSS AND JS code in the "head" section of my webpages as a workaround.
My problem hopefully requires just a simple update/adjustment of my existing JS. The popup Div (for the Contact Form) on my site which was functioning 100% correct (except for position:fixed issues in IE I had gave up on for the moment) just a week ago. Well my hosting company just switched over to HTML5 (from "DTD 4.01 Transitional" I believe) and now my popup div is no longer functioning correctly in ANY browser (IE9, FF, Chrome, Safari), some worse than others.
The issues to fix are (please go to my website http://solitairethahalo.com to see it in action):
FIXED (all 4 browsers) "line-height" html tag I used to format the contact form instructions/info no longer works; as a result the "Form" div class is now larger than the div container height
75% FIXED (Firefox & IE) positioning is incorrect; popup appears at bottom of screen so that only a small portion of the popup's header is visible
50% FIXED (all 4 browsers) my existing popup never had the code for it, but I would like for the popup div to remain centered/fixed when the browser window is resized if possible
I can't paste my existing code properly, so I made it accessible thru my website: http://solitairethahalo.com/popupdiv.txt
Please provide (you can email me as necessary) a revised HTML5-compliant version of my existing code if possible.
Thanks!
UPDATES:
Line-height: After looking it up and getting an idea, I fixed the problem by simply changing to . Glad it was simple.
Popup positioning & resizing: The positioning error is fixed with a slight adjustment to my existing code. Using js code from a comment below allowed me to get the desired re-positioning of the popup upon window resizing. However, I've been unable to make the modal window function with that code. So for now, I've reverted to my own revised code that currently lacks the re-size re-position functionality, but I'm working on it still.
If you can't use any JS then its possible in only one way.
You can do one thing, Either for popup replace it with sliding panel.
Add your popup div inside "contact" div. And from CSS3 on mouseover of your "contact" div, use css3 transition and set its position left to show popup.
This will work in all browsers. Animation wont work in IE8 or lesser.
I'm having a problem related to WebKit:
http://demo.frojd.se/webkit/index.html
When you click "Menu item 1" it shows it's children.
This renders fine in Firefox 3.5, IE8 and in Opera 10.
In WebKit-browsers (Safari 4 and Chrome 3) it doesn't.
However, if I preset all the different classes and css-settings in the
html, it renders correctly (without the javascript click events). I've got an URL to show you, but can't since this is my first post.
Any ideas on why this might be?
Cheers,
Robin.
I really haven't looked at the code closely, but something to look at in this situation is the padding or margin set on the menu item divs. In Safari, those are not taken into account with respect to width, so they may make the div or contents of the div expand wider than you expect, and that would cause the next element to be pushed to somewhere you don't expect it.
Not sure if that'll help, but it's some place you can look if you're still stuck.
Edit: After looking at the source using Web Inspector, it seems the divs with class = 'parentHook' are not wide enough after getting clicked on. After getting clicked on the class changes to 'parentContainer', which sets 'margin-left:-18px; margin-top:-15px;', and that seems to throw off the width of that div. In Web Inspector I changed the width of that div to 150px, and it worked as expected.
A true and ugly hack- but hey it works.
try hiding and showing on the click of the <li>
for a simple test: try this in console
$('#nav li:first').hide(50).show(50)