Strangely, it started happening since Chrome94 and only on my Android phone (while everywhere else it still works fine like in my Android tablet).
When border-radius: 30px; is removed from the class that has backdrop-filter: blur(8px); in it, the DIV now appears with the default sharp corners (that we don't want) but the glassmorphism actually goes back to functioning as expected and the great look starts working again on the phone as well. So the question is,
Is there a way to make the beautiful backdrop-filter: blur() work without sacrificing the beauty of rounded corners?
Already tried and failed, using pseudo elements like ::before but the result is the exact same.
Also tried and failed applying filter: blur(0px); to the underlying element that is supposed to get blurred but that changed absolutely nothing in my tests.
Note 1: No problems observed on Windows PC Chrome and ASUS tablet Chrome.
Note 2: It used to work fine on the SONY phone too before updating to Chrome94 (that is if my memory is correct)
Related
Problem: I developed a single page website with Reactjs and deployed it to Heroku (It is a remake of an existing website. I want to include it as a part of my portfolio for entry-level web dev job). When inspecting on Chrome Toggle device toolbar, the responsive website worked fine in stimulated mobile and ipad. When opening the site in my iPhone7 Plus, it also worked fine. But when opening in a real iPad, several section elements did not position as expected - they overlapped.
The affected elements are child elements of a container element which has CSS style overflow: auto. display: flex, flex-direction: column. The effect I want to achieve is that all the main contents (except navigation menu, footer and sidebar) are included in a scroll-able container.
Screenshot of the website in ipad browser
I spent some time trying to search for answer on the Internet but did not get any luck.
Question: How to make the responsive website works properly in iPad devices?
After multiple trials and searches on Stackoverflow, I finally found out the solution.
I came across a stackoverflow question and noticed the similarity of my problem. In the case of my project, the container element's styles include overflow: auto, display: flex, flex-direction: column. For some reason (I still do not understand the theory behind this), when the web app is opened in an iPad browser, the container's child elements (flex items) shrink automatically. That is why child elements overlapped with each other. To solve this, I set CSS style flex-shrink: 0 for each child element. Now the app works properly in iPad.
The link to the other stackoverflow question is as follows:
flex items overlapping in Safari (iPad)
I observe strange behavior of the same code used in desktop application and IE11 plugin.
I'm adding OSD and some geometry to video frame using DirectDraw and Direct2D which works fine in desktop application. The same code is used in IE11 plugin but none of above appear on the video. In both cases I recalculate positions to match the current frame size and it works flawlessly in desktop. Once I switch to IE, everything is drawn off-screen. Once I stop recalculating positions it starts to appear in IE plugin (not exactly where it should be) but in desktop it looks definitely wrong. Frame sizes and coordinates (recalculated) are the same for both cases (added printouts to validate it). What is the problem could be and why it behaves differently between desktop and IE plugin?Running on Win10 x64, IE11, DirectX11Sorry, providing minimal reproducible example is quite problematic in this case, but I can try and show the code (quite a big chunk) if someone interested.
EDIT001: Oddly it works on another Win10 machine as expected. Have to be something with my local machine, the question is what is it.
I have just created a dropdown for my site. It works fine in all other browsers except new version of opera that is 12.02.
Webiste Url : http://www.sktechnologyworld.com/demo/anything/
Here when you mouse over on "Categories", it displays dropdown of that categories then when you hover on categories then it displays subcategories of that category. At this time there is background line remains at top of that perticular category and this same thing in all the subcategories. However when i open dragon fly in opera by pressing ctrl+shift+I then it works fine but if dragon fly is not open then it makes it weird.
Its very strange and have not face this kind of problem before. Any help?
Thanks
This is indeed a bug in Opera. As it's merely a cosmetic issue with no big impact on functionality I suggest you just report a bug to Opera Software and forget about it until it's fixed :-)
The root cause is that Opera fails to draw the background colour of the padding-top of the A elements correctly. It's mainly triggered by the padding-top:9px instruction on #CategoriesBar .nav. However, trying to work around it means adding hacks to your CSS and that makes it harder to understand and maintain - even more likely to break in future browsers. Hence reporting a bug and not trying to work around it is your best way ahead.
Here is a simplified demo you can refer to when reporting the bug:
http://jsfiddle.net/sNHbB/
Please let me know the bug reference number and I'll give it a kick for you.
I've been experiencing some very strange behavours in an app I'm developing. The app is not very advanced, it stores a couple of places in a sqlite database and is displayed in listviews, on a mapview etc. So, when browsing through my app after deploying it to my phone everything works great, but after a while one listview doesn't get inflated. A scrollbar appears as if the items were there but I can't see them. I push the back button to close the app. When revisiting the app my first view, which has two buttons, gets all messed up. The buttons fill the viewport and the background disappears etc. I can't figure out what's wrong.
Anyone else facing these problems? My phone is a HTC Desire HD with Android 2.3.5
The app is pretty "layout heavy", if you know what I mean. The listview items has custom background images, I'm using custom fonts etc. But the app is running smoothly up to the point when it freaks out and displays/don't display everything wrong.
My first thought is there is some kind of memory issue, ideas?
EDIT:
I believe this might have something to do with defining and using #00000000 as transparent color. Use #android:color/transparent instead.
SOLUTION:
So after doing some testing I found that what I previously mentioned in the edit really is the cause of this problem. I had defined the transparent color in my colors.xml as #00000000. This seems to work, sometimes... And other times it grabs a drawable instead, but not a drawable that is named "transparent", it grabs ANY drawable. Weird but true.
After some testing I finally found the cause of this problem. I had defined the transparent color in my colors.xml as #00000000. This seems to work, sometimes... And other times it grabs a drawable instead, but not a drawable that is named "transparent", it grabs ANY drawable. Weird but true.
So to fix this problem you should use #android:color/transparent instead when you want transparency on, for example, a view background.
If there are memory errors you should be able to catch them in logcat. You'll get "VM failed on xxxx byte allocation" messages (or the like).
Silly/stupid answer: often when I run into layout issues within my app, it's because I needed to do a clean build after having changed my layouts. You might want to start there.
Edit: You might also try the emulator, and if you suspect memory issues you could start the emulator with a small heap to force the issue to occur sooner. You can also check your heap usage in DDMS or with the Eclipse MAT to see if it's leaking.
I was experiencing the same problem on Galaxy tab even with #android:color/transparent. Was able to fix it only by replacing android:background="#color/transparent" with android:background="#null".
I found strange problem. I used this basic example of google maps. This maps works on all browsers except on default browser in my Samsung GalaxyTab (Honecomb 3.1). In this browser there are hidden controls. Or controls have bad z-index. If I move with map, I can see them for a while. There is no problem in default browser in Android 2.3, in Firefox on tablet, or any other browsers. Does anyone have solution for it?
Thanks!
I discovered this bug today as well, but I'm trying to get an element float on top of a google maps element. I found a fix at: https://github.com/CloudMade/Leaflet/issues/335 and that is to add:
.gmnoprint {
-webkit-transform: translate3d(0,0,0);
}
This forces the element to be on top, for some really odd reason. The line above works for the built in zoom controls etc on my Samsung Galaxy Tab 10.1 and can of course be applied to all elements that should be on top.