I'm just getting started with BonsaiJS and I've found some odd behaviour with how Text gets displayed. As the following pic shows, on Chrome(25), Firefox(19) and IE(9) the text example on the site is only shown correctly on chrome, while the same example on orbit appears to be correct in all 3 browsers, except the white space left at the top varies for some reason..
Any clue as to why this may be happening and how could I fix it?
PS: I've lowered the textStrokeWidth because I couldn't stand the text being shown in all yellow '^^
I assume this issue has been fixed in version 0.4.3.
Latest 0.4 build: http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js
According ticket: https://github.com/uxebu/bonsai/issues/166
Related
I'm building a site for a client and man I'm having a hard time with CSS Scroll Snap in Chrome...
{{redacted URL}}
I'm using Chrome 109.0.5414.87 on OSX. After the intro animation (FYI I hate these but clients love them) you should see:
Scrolling from first red section into blue I see a flash
Scrolling from first red section into blue, often times it will almost get to blue, but then glitch back to red.
You can actually scroll UP past the top of the page
Works great on Firefox and even Safari (OMG).
All the issues seem to be related to going from first slide to the second.
I have noticed that the length of the scroll-handle seems to change when going from section 1 to 2, I have no idea why but perhaps that is related?
Any tips or help would be most welcomed!
OK looking into this now, I see that it was because I had an element (footer) at the bottom of the page that was toggling to display:none. Not sure why this should effect scroll snap, but I suppose it's because it is changing the length of the scrollbar and Chrome didn't like that.
This doesn't stop the scroll up issue (#3), but it does seems to solve all the visual glitches.
So for all future people: When using scroll-snap, make sure you aren't doing anything that might change the height of the page during scroll, Chrome doesn't like that. 100vh on mobile was another culprit of this.
I'm trying to get a centered image that spans the entire page, with a small text box overlay. You can see my attempt at www.cloudtute.com.
Unfortunately this doesn't work in all browsers and the form elements look weird in some browsers. E.g. trying it in internet explorer 9 it comes up tiled and the text box is black!
I was trying to go for a similar effect to the image on www.airbnb.com which works in all browsers - can anyone tell me where I'm going wrong please?
From what you've explained it shouldnt be too difficult. However www.cloudtute.com isnt opening for me, it comes up with not found, so I cant see your code. If you can add your current code or get the website working again I can help out.
I've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has
I have recently launched a site built on word press using a heavily edited child theme of the twenty ten theme, the problem is when viewed in google chrome or safari a small portion of the left hand border on the sidebar sat on the left is displaying the wrong colour. Its not a big issue and it goes away when you scroll to the bottom of the page, its more annoying than anything just wondering if any one else had encountered this.
I am using different colour borders to get the pressed in effect if this matters.
The site is located at www.paintedroom.co.uk
I have found what is causing this bug it is the border-radius property. when removed the bug goes away still not sure how to fix though.
Heres the story:
When I load the following page in chrome (verified across 2 computers), it seems like about 1 in 5 refreshes results in display errors.
Often, the background image only loads halfway down the the screen, and the bottom half displays only white (which is weird b/c I have the background set to black under the image.)
There is at least one other incorrect way that it displays which is a less exaggerated version of the other problem.
Since it only happens sometimes and only on chrome (as far as I can tell) and only on one page of the site, I have ignored this issue for more pressing concerns; but I develop in chrome so I am constantly reminded of it.
I have absolutely no clue why this kind of thing would happen and even less of a clue how to remedy it. Any insight anyone might have would be greatly appreciated.
The page
Try to load your page in Safari. If you see same problem, means you missed a bracket or semi column in your css. Webkit browsers seem to handle css errors this way. I had same problem happening to me once. My css file was over 2800 lines. It took some time to find the error. Best.
See the following link:
Issue with background color and Google Chrome
This fixed the problem for me...