Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

So, I have this simple visualforce page:

<apex:page standardstylesheets="false" showheader="false" sidebar="false" docType="html-5.0" applyHtmlTag="false">
  <div>
    <h1>
      <a href="/">
        <div>
          <svg height="480" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: -0.3125px;">
            <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.0.1</desc>
            <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
            <ellipse cx="320" cy="240" rx="128" ry="180.48" fill="none" stroke="#555555" transform="matrix(1,0,0,1,0,0)" stroke-width="1" opacity="0.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></ellipse>
          </svg>
        </div>
      </a>
    </h1>
    <hr/>
  </div>
</apex:page>

The page renders, however salesforce is modifying the HTML when the page is sent to the browser. If I view the source of the page, here's what I get:

<!DOCTYPE HTML>
  <head>
    <script src="/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript?rel=1403162922000" type="text/javascript"></script>
    <script src="/static/111213/js/perf/stub.js"></script>
  </head>
  <div>
    <h1>
      <a href="/">
        <div>
          <svg height="480" style="overflow: hidden; position: relative; top: -0.3125px;" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg">
            <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Rapha&euml;l 2.0.1</desc>
            <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
            <ellipse cx="320" cy="240" fill="none" opacity="0.5" rx="128" ry="180.48" stroke="#555555" stroke-width="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;" transform="matrix(1,0,0,1,0,0)"></ellipse>
          </svg>
        </div>
      </a>
      <hr />
    </h1>
  </div>

Which is ALMOST correct. Note that the hr has been included in the h1 tag. Why would this be happening and what can I do to fix it? I'm only able to produce this result when I'm rendering an svg to the browser. Otherwise, the HTML is preserved.

share|improve this question
    
The <hr/> tag is present in the VF page (source) as well. What are the other differences? –  theGreatDanton Jun 23 at 5:32
    
The hr tag is present in the page source but it is in the wrong spot. It should not be inside the h1 tag. –  DerekLansing Jun 23 at 5:33

1 Answer 1

up vote 4 down vote accepted

Definitely seems like a bug with the processing engine to me. If you wrap everything inside the <h1> tags with no-layout output panel then the generated HTML comes out as expected:

<apex:page standardstylesheets="false" showheader="false" sidebar="false" docType="html-5.0" applyHtmlTag="false">
  <div>
    <apex:outputPanel layout="none">
        <h1>
          <a href="/">
            <div>
              <svg height="480" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: -0.3125px;">
                <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.0.1</desc>
                <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
                <ellipse cx="320" cy="240" rx="128" ry="180.48" fill="none" stroke="#555555" transform="matrix(1,0,0,1,0,0)" stroke-width="1" opacity="0.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></ellipse>
              </svg>
            </div>
          </a>
        </h1>
      </apex:outputPanel>
    <hr/>
  </div>
</apex:page>
share|improve this answer
    
Thanks Matt. This works for my simplified stackexchange version but still breaks in the full page. Looks like there is a bug here. I'll submit the bug to salesforce. –  DerekLansing Jun 23 at 15:56
    
It's turtles all the way down. Just keep wrapping in output panels everywhere for now, but yeah, kick that bug report in to them! –  LaceySnr Jun 23 at 22:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.