Magento2: [Magento 2.2.2] The attribute 'color' is not allowed when trying to add a pinned tab icon / mask-icon for Safari

[atishgoswami]

Preconditions

Project Environment

Magento Version: 2.2.2 CE
PHP: 7.1.10
Database: MySQL 5.7
OS: CentOS 7
Caching: Varnish Cache and OPcache

Steps to reproduce

1. Create a custom theme for Magento2

2. Create a file app/design/frontend/<Vendor>/<theme_name>/Magento_Theme/layout/default_head_blocks.xml

3. Try adding a mask-icon for Safari Pinned tab icon

<?xml version="1.0"?>                                                                              
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    ....
    <link rel="mask-icon" src="/safari-pinned-tab.svg" color="#5bbad5"/>
    ....
</page>

1. Save the file, clear the relevant cache and refresh the page

Expected Result

The HTML page should have a link tag for the safari pinned tab icon
<link rel='mask-icon' href="/safari-pinned-tab.svg" color="#5bbad5"/>

Actual Result

Exception #0 (Magento\Framework\Config\Dom\ValidationException): Element 'link', attribute 'color': The attribute 'color' is not allowed.

Am I doing anything wrong?

[magento-engcom-team]

Hi @atishgoswami
The html link tag does not have a color attribute. See: https://www.w3schools.com/tags/tag_link.asp
You can use color attribute by style:
<link rel='mask-icon' href="/safari-pinned-tab.svg" style='color="#5bbad5"'/>
But i am not sure what do you want.

[magento-engcom-team]

@atishgoswami, thank you for your report.
This seems to be correct Magento behavior. Please refer to the Community Forums or the Magento Stack Exchange site for advice or general discussion about this.
Otherwise you may submit Pull Request with the suggested changes.

[sanganinamrata]

@magento-engcom-team : I'm still getting the same issue on magento version 2.2.2.
Tried <link rel='mask-icon' href="/safari-pinned-tab.svg" style='color="#5bbad5"'/> way also.

[ishakhsuvarov]

@sanganinamrata @atishgoswami
According to https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html this indeed seems to be an issue in validation.

[svenakela]

I just ran into this problem as well on 2.2.4. I tried style and no effect, but when I removed the color totally it is all up and running. Seems this bug can be spooking around before it really takes effect. One site owner upgraded long time ago but not until later when a clear cache command was issued it hit them.

[peterlagerstrom]

Hi, w3school is not really credible on what is correct. According to the newest "HTML Living Standard" it is a valid attribute.
https://html.spec.whatwg.org/multipage/semantics.html#the-link-element

[DePalmo]

Workaround: ignore the default_head_blocks.xml and go to Magento's Backend > Content > Design > Configuration > (select your theme) Edit > HTML Head > Scripts and Style Sheets and paste your content. That one is not validated and works.

[magento-engcom-team]

Hi @engcom-backlog-nazar. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [x] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
  Details

  If the issue has a valid description, the label G1 Passed will be added to the issue automatically. Please, edit issue description if needed, until label G1 Passed appears.

• [x] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add G2 Passed label to the issue by yourself.

• [x] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [x] 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [x] 5. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [x] 6. Add label acknowledged once verification is complete.

• [x] 7. Make sure that automatic system confirms that report is acknowledged.

[magento-engcom-team]

@engcom-backlog-nazar Thank you for verifying the issue. Based on the provided information internal tickets MAGETWO-95093, MAGETWO-95094 were created

[ghost]

Hi @atishgoswami, thank you for your report.
We've acknowledge the issue and added to our backlog.

[magento-engcom-team]

@atishgoswami, thank you for your report.

Unfortunately, we are archiving this ticket now as it did not get much attention from both Magento Community and Core developers for an extended period. This is done in an effort to create a quality, community-driven backlog which will allow us to allocate the required attention more easily.

Please feel free to comment, reopen or create new ticket according to the Issue reporting guidelines
if you are still facing this issue on the latest 2.3-develop branch. Thank you for collaboration.

[kamzata]

Any news on this?