Производственная сборка React отличается от разработки | полифилл не запускается

Я запустил npx create-react-app . и импортировал clip-path вручную. Разработочная сборка работает без проблем, а производственная, похоже, не работает. Проблема одинакова в IE11 и Edge44.

скриншот проблемы

Действия по воспроизведению:

  1. npx create-react-app .
  2. добавить «ie 11» к browserslist в package.json для prod и dev
  3. npm i react-app-polyfill
  4. в index.js добавить import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';
  5. Возьмите shapes-polyfill.js из css-shapes-polyfill и вставьте скрипт в .index.html > head, а также добавьте браузерный полифилл.
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src='shapes-polyfill.js'></script>
  1. включить <style> в index.html > head
<style>
#polygon-shape-outside {
  width: 200px;
  height: 200px;
  float: left;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><polygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/></svg>");
  shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
}
</style>
  1. Вставьте div в App
<div style={{
  width: 400,
  fontSize: 10,
  background: 'grey'
}}>
  <div id="polygon-shape-outside"></div>
  <p>Pelicans are a genus of large water birds comprising the family Pelecanidae. They are characterised by a long beak and large throat pouch used for catching prey and draining water from the scooped up contents before swallowing. They have predominantly pale plumage, the exceptions being the Brown and Peruvian Pelicans. The bills, pouches and bare facial skin of all species become brightly coloured before the breeding season. The eight living pelican species have a patchy global distribution, ranging latitudinally from the tropics to the temperate zone, though they are absent from interior South America as well as from polar regions and the open ocean. Fossil evidence of pelicans dates back at least 30 million years, to the remains of a beak very similar to that of modern species recovered from Oligocene strata in France.</p>
</div>

reactjs microsoft-edge internet-explorer-11 polygon clip-path
person Dawid    schedule 05.06.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Изображение не отображалось в IE, потому что IE строг к SVG. Подробности можно найти в этом блоге Codepen. точки:

  • Большинство браузеров снисходительно относятся к строке charset=, но она необходима для Internet Explorer. Это означает, что вам нужно использовать ;charset=utf8, вместо ;utf8,.
  • Вам придется процентно кодировать символы, которые не являются безопасными для URL. Например, от <svg> до %3Csvg%3E. Вы можете свести к минимуму процентное кодирование, которое необходимо выполнить, используя одинарные кавычки ' вместо двойных кавычек ".

В соответствии с этим я изменил некоторые части вашего кода в <style> из index.html:

#polygon-shape-outside {
    width: 200px;
    height: 200px;
    float: left;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'%3E%3Cpolygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/%3E%3C/svg%3E");
    shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
  }

Затем он может хорошо работать в режиме разработки во всех браузерах.

О разнице между режимом dev и режимом prod: добавьте data-shape-outside="polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px)" в <div id="polygon-shape-outside">. Тогда содержимое будет обтекать изображение, и страница будет работать точно и одинаково в обоих режимах и во всех браузерах.

person Yu Zhou    schedule 06.06.2019
comment
Спасибо за подробный ответ - person Dawid; 06.06.2019