This should be here an ON button, but sometimes Safari renders it badly, in Chrome it is always works. Normally it looks like this:
Here enableSaleBlock is the flex parent.
Do you have any idea what is wrong?
.enableSaleBlock { width:90%;}
Related
I'm having a hard time figuring out how to make my footer stick to the bottom of the screen, even when the page is smaller than the screen.
www.test-domain.sk
I'm guessing it's something to do with the container length, but I'm honestly completely unsure.
Any help would be appreciated. :)
This concept is something known as a sticky footer. The Mozilla Developer Network has a page here illustrating a few ways to accomplish it. In the example of your www.test-domain.sk page, I believe you can add the following css to make your footer stick to the bottom of the viewport (screen).
html {min-height:100%)
body {100vh}
div#page {min-height:100vh; display:grid; grid-template-rows: auto 1fr auto}
Assuming you are looking for something like this, but if not, be more specific. As in post the code you already have.
footer {
position: fixed;
bottom: 0;
}
I've got a list component that I would like to keep in the DOM whenever it's not needed so that the scroll position is not lost.
I've tried setting the style to {display: 'none'} but this unmounts the component. I've also tried setting { flex: 0.0001 } which kind of works but it feels like a hack (which they might optimise to "0" later on) and it creates layout glitches when the component is shown/hidden.
Any idea what would be the proper way to do this?
I have found that in recent React Native the approach with:
{ display: 'none' }
Do the works fine for me, my Tab component switches layouts without unmounting it's contents.
Tested on: RN 0.58.1, iPhone X 12.1.
If I understand correctly, you want the component to stay mounted but not take up any space or render anything? What if you just pass a hide property to the component which will just return an empty view in the render if it's true.
Try this:
<div style={{visibility: this.state.hidden ? 'hidden' : 'visible'}}>
content
</div>
I've a matter with this code, why do the foreignObject children go out from the mask ?
Here's my code http://jsbin.com/ehukom/2/
.posand .pos2should be in the mask... Where's my error?
I assume your errors are
trying only Chrome (have a look at Firefox as well) and
assuming that Chrome is right and you're in error.
The only good fix to this problem I can think of is reporting a bug.
I am using a drop shadow filter inside an SVG file that is embedded using an img tag. On my MacBook, it looks fine in Safari. However, in mobile Safari, the graphic gets really pixelated and loses all it's sharpness. When the filter is not applied, the SVG renders fine. Is there any way to fix that besides to pass on the filter?
This problem is still relevant in 2018, and I've found a solution. You can duplicate the element you give the filter to, place it below the actual element, and keep filter only on it, without any filter on the element. This way, Safari and other browsers will only rasterise the element with the shadow when resizing, however it will be hidden by the sharp-looking vector element. You can see examples and read more here.
Unfortunately I tried all the suggested workarounds for this, none of them worked, the only thing that worked for me was putting the svg inline, not as an img tag.
Surprised this issue appears to have been around for so long!
You should try explicitly setting the "filterRes" attribute of the filter to a value that matches retina displays.
It's 2021 and it's still relevant. I found a workaround that worked for me: You can enlarge the svg and then use a css-transform to scale it back:
.section_logo img {
height: 500%;
transform-origin: top left;
transform: scale(0.2);
}
I do some work on on old tables based site. It is being replaced but I would like it to work for now.
One of the pages in question is http://www.gdsofusa.com/marantec_garage_door_openers.html. When this page (and some others) is viewed in Safari 5.0 (7533.16) and probably others, the page content is off to the right.
I just need to fix this since about 15% of the traffic is Safari.
Please help!
I got it working by:
Removing "float:left" on your "tabs" div
Setting your "tabs" li's as "display:inline-block" instead of "display:inline"
HTH
The first thing to try is always validation
A common cause of this kind of problem is a mismatched end tag on an HTML element.
Try an HTML validator like http://validator.w3.org