Compatibility problem with box-shadow

Question

Compatibility problem with box-shadow

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

The shadow of div is displayed differently in safari and chrome.

Do I need some type of prefix?

I have given it many laps and I can not find the solution so that the shadow is also displayed in the other browsers.

HTML:

<article class="squares">
                <h3>Some works that I´ve developed</h3>
                <div><a href="#">Selectors & Hierarchy</a></div>
                <div><a href="#">Measures & Colors</a></div>
                <div><a href="#">Box models & Display</a></div>
                <div><a href="#">Selectors & Hierarchy</a></div>
                <div><a href="#">Selectors & Hierarchy</a></div>
                <div><a href="#">Selectors & Hierarchy</a></div>
                ....

CCS:

.squares div{
    height: 220px;
    width: 100%;
    background: white;
    text-align: center;
    vertical-align: bottom;
    background-size: 100% !important;
    box-shadow: inset 0 0 400px black;
    border-bottom: 5px solid white;
    margin: 0;
    padding:0;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

Here is the website if you want to see the result

I appreciate any help!

Edit: I've added the prefixes -moz and -webkit and the error persists

html5 html css3 css

asked by Marqu3s10 28.04.2017 в 19:23

source

3 answers

Improve performance when loading images with reactjs Problem when passing information from a JTable to a JComboBox

score 0 · Answer 1

It is effectively advised to use the following:

.squares div {
  -webkit-box-shadow: inset 0 0 400px black;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    inset 0 0 400px black;  /* Firefox 3.5 - 3.6 */
  box-shadow:         inset 0 0 400px black;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

score 0 · Answer 2

use:

-webkit-box-shadow (for compatibility with chrome and safari)
-moz-box-shadow (for firefox compatibility)

.squares div{
    height: 220px;
    width: 100%;
    background: white;
    text-align: center;
    vertical-align: bottom;
    background-size: 100% !important;
    box-shadow: inset 0 0 400px black;
    -webkit-box-shadow: inset 0 0 400px black;
    -moz-box-shadow: inset 0 0 400px black;
    border-bottom: 5px solid white;
    margin: 0;
    padding:0;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

<article class="squares">
  <h3>Some works that I´ve developed</h3>
  <div><a href="#">Selectors & Hierarchy</a></div>
  <div><a href="#">Measures & Colors</a></div>
  <div><a href="#">Box models & Display</a></div>
  <div><a href="#">Selectors & Hierarchy</a></div>
  <div><a href="#">Selectors & Hierarchy</a></div>
  <div><a href="#">Selectors & Hierarchy</a></div>
</article>

score 0 · Answer 3

Try this to see how it is:

.shadow{
  box-shadow:0px 4px 6px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow:0px 4px 6px rgba(0, 0, 0, 0.45);
  -moz-box-shadow:0px 4px 6px rgba(0, 0, 0, 0.45);
  -ms-box-shadow:0px 4px 6px rgba(0, 0, 0, 0.45);
}
div{
  width: 200px; height:200px;text-align:center; line-height:200px;
 }

<div class="shadow">Hola mundo</div>